<script setup lang="ts">
import { ref, onMounted,getCurrentInstance ,onUnmounted, watch} from 'vue'
import * as echarts from 'echarts';
import { ArrowLeftBold } from '@element-plus/icons-vue'; // 确保导入了图标
const firstChartRef = ref<HTMLDivElement | null>(null);
let firstChart: echarts.ECharts | null = null;

// 接收父组件传递的 props
const props = defineProps<{
  filmid: string;
}>()

const filmDetail = ref(null)
const global=getCurrentInstance().appContext.config.globalProperties;
// 在组件挂载后发起请求
onMounted(() => {
  global.$http.post('/public/film/query', {
    // 直接传递到请求体，不要放在 params 里
    filmid: props.filmid
  })
      .then(resp => {
        console.log('查询结果:', resp.data)
        // 假设接口返回的是数组，取第一个元素（单条详情）
        filmDetail.value = resp.data[0] || null;
      })
      .catch(err => {  // 用 catch 捕获错误
        console.error('请求失败:', err)
        // 可以添加错误提示，如：
        // ElMessage.error('获取电影详情失败，请稍后重试')
      })
})

const actorlideshowlist = ref(null)
const global1=getCurrentInstance().appContext.config.globalProperties;
// 在组件挂载后发起请求
onMounted(() => {
  global1.$http.post('/public/actor/actorquery', {
    // 直接传递到请求体，不要放在 params 里
    actortype: props.filmid
  })
      .then(resp => {
        console.log('查询结果:', resp.data)

        actorlideshowlist.value = resp.data;
      })
      .catch(err => {  // 用 catch 捕获错误
        console.error('请求失败:', err)
        // 可以添加错误提示，如：
        // ElMessage.error('获取电影详情失败，请稍后重试')
      })
})

const markSheetList = ref(null)
const global2=getCurrentInstance().appContext.config.globalProperties;
// 在组件挂载后发起请求
onMounted(() => {
  global2.$http.post('/public/marksheet/query', {
    // 直接传递到请求体，不要放在 params 里
    scoreid: props.filmid
  })
      .then(resp => {
        console.log('查询结果:', resp.data)
        markSheetList.value = resp.data;
      })
      .catch(err => {  // 用 catch 捕获错误
        console.error('请求失败:', err)
      })
})

/* 星级分类评分柱状图配置 */
const formatFirstData = () => {
  // 边界判断：无数据时返回默认值
  if (!markSheetList.value || markSheetList.value.length === 0) {
    return {
      categories: ['★', '★★','★★★','★★★★','★★★★★'], // y轴分类
      scores: [0,0,0,0,0] // x轴数据（默认0）
    };
  }

  // 从第一条数据中提取年龄评分
  const row = markSheetList.value[0];
  return {
    categories: ['★', '★★','★★★','★★★★','★★★★★'], // y轴显示年龄区间
    scores: [
      row.oneToTwo || 0,  // ★
      row.threeToFour || 0,  // ★★
      row.fiveToSix || 0,  // ★★★
      row.sevenToEight || 0,  // ★★★★
      row.nineToTen || 0,  // ★★★★★
    ]
  };
};

// 初始化星级分类评分柱状图
const initFirstChart = () => {
  // 确保柱状图容器已渲染
  if (firstChartRef.value) {
    // 销毁已有实例（避免重复创建）
    if (firstChart) firstChart.dispose();

    // 初始化柱状图实例
    firstChart = echarts.init(firstChartRef.value);
    // 获取格式化后的柱状图数据
    const firstData = formatFirstData();

    // 柱状图配置项
    const option = {
      tooltip: {
        trigger: 'axis', // 按坐标轴触发提示
        formatter: '{b}: {c}%' // 提示内容：名称: 分数
      },
      grid: { // 图表网格（控制图表与容器边缘的距离）
        left: '3%',
        right: '4%',
        bottom: '3%',
        top:'3%',
        containLabel: true // 确保标签不被裁剪
      },
      yAxis: { // y轴配置
        type: 'category', // 分类轴（用于显示文本分类）
        data: firstData.categories, // y轴数据（年龄区间）
        axisLabel: { fontSize: 8 },// y轴标签字体大小
        barCategoryGap: "0%",  // 适中的分类间距
        barGap: '0%',          // 系列间距设为0
        splitLine: {
          show: false
        },
        //隐藏 y 轴的轴线
        axisLine: {
          show: false
        },
      },
      xAxis: { // x轴配置
        type: 'value', // 数值轴（用于显示评分）
        min: 0, // 最小值0
        max: 10, // 最大值10（评分通常0-10分）
        axisLabel: {
          show: false // x轴标签不显示刻度
        },
        splitLine: {
          show: false //不显示横线
        }
      },
      series: [ // 柱状图数据系列
        {
          name: '用户评分', // 系列名称
          type: 'bar', // 图表类型：柱状图
          data: firstData.scores, // 数据
          itemStyle: { color: 'orange' }, // 柱子颜色
          barWidth: '20%' // 柱子宽度（相对于分类间距的百分比）
        }
      ]
    };

    // 应用配置项到柱状图
    firstChart.setOption(option);
    console.log(firstChart.getOption().yAxis[0].barCategoryGap); // 若输出为0或其他值，说明被ECharts修正了
    // 调整大小适应容器
    firstChart.resize();
  }
};
//数据监听：当数据变化时自动更新图表
// 监听markSheetList的变化（评分数据变化时）
watch(markSheetList, () => {
  initFirstChart();  // 更新
});

//组件初始化和生命周期管理
// 组件挂载完成后执行（页面DOM已渲染）
onMounted(() => {
  // 延迟100ms初始化图表：确保DOM完全渲染完成
  setTimeout(() => {
    initFirstChart();  // 初始化
  }, 100);

  // 监听窗口大小变化，动态调整图表大小
  window.addEventListener('resize', handleResize);
});

// 窗口大小变化时触发：调整图表大小
const handleResize = () => {
  if (firstChart) firstChart.resize();  // 调整
};

// 组件卸载时执行：清理资源，避免内存泄漏
onUnmounted(() => {
  // 销毁图表实例
  if (firstChart) firstChart.dispose();
  // 移除窗口大小监听事件
  window.removeEventListener('resize', handleResize);
});

const hasEgg = true; // 是否有彩蛋标识
const isCollapsed = ref(true); // 控制收起/展开状态，默认收起
const maxLength = 40; // 收起时显示的最大字符长度
</script>

<template>
  <el-affix :offset-top="0" :z-index="999">
    <el-col :span="24">
      <div style="background: #666666;">
        <el-icon :size="20" @click="$router.back()" style="color: white; margin: 8px;">
          <ArrowLeftBold />
        </el-icon>
        <span style="color: white;font-size: 20px;">电影</span>
      </div>
    </el-col>
  </el-affix>
  <!-- 电影详情 -->
  <!-- 加 v-if 判断，避免数据未加载时报错 -->
  <div v-if="filmDetail" style="background: #6A4325;color: white">
    <div style="height: 130px">
      <el-row>
        <el-col :span="6" style="margin: 5px">
          <el-image :src="filmDetail.filmurl"></el-image>
        </el-col>
        <el-col :span="17">
          <div class="film-container">
            <div class="film-information">
              <div style="font-weight: bold; font-size: 20px">{{ filmDetail.filmname }}</div>
              <div style="font-size: 13px;color: orange">"{{ filmDetail.recommend }}"</div>
              <div style="font-size: 13px">{{ filmDetail.filmtype }}</div>
              <div style="font-size: 13px">
                {{ filmDetail.releasedate }}中国大陆上映 {{ filmDetail .duration }}分钟
              </div>
              <div style="display: flex; gap: 20px;">
                <div style="background: darkgray;width: 70px;text-align: center;border-radius: 8px;color: #f8f8f8">♥想看</div>
                <div style="background: darkgray;width: 70px;text-align: center;border-radius: 8px;color: #f8f8f8">★看过</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div style="background: #777777; height: 100px; margin-bottom: 10px; border-radius: 12px;">
      <el-row>
        <el-col span="24">
          <router-link
              :to="{name:'MarkSheet',params:{filmid:props.filmid}}"
              style="color: white; text-decoration: none; font-size: 20px;"
          >
            <div style="font-size: 15px;margin-top: 5px;margin-left: 5px">
              <span>🐱猫眼购票评分</span>
              <el-icon><ArrowRight /></el-icon>
            </div>
          </router-link>
        </el-col>
      </el-row>
      <br>
      <el-row>
        <el-col span="6">
          <div style="font-size: 40px;margin-left: 20px;color: orange">{{filmDetail.filmscore}}</div>
        </el-col>
        <el-col span="18">
          <div ref="firstChartRef" style="width: 200px; height: 70px;"></div>
        </el-col>
      </el-row>
    </div>
    <div style="margin-bottom: 10px">
      <div class="title">
        <span>简介</span>
        <span class="egg" v-if="hasEgg">有彩蛋</span>
      </div>
      <div class="content">
     <span v-if="isCollapsed">
      <!-- 直接在模板中处理截断逻辑 -->
      {{ filmDetail.filmsynopsis.length > maxLength ? filmDetail.filmsynopsis.slice(0, maxLength) : filmDetail.filmsynopsis }}
    </span>
        <span v-else>
        {{ filmDetail.filmsynopsis }}
      </span>
        <span class="toggle" @click="isCollapsed = !isCollapsed">
        {{ isCollapsed ? '... 展开' : '收起' }}
      </span>
      </div>
    </div>

    <div class="title">演职人员</div>

    <!-- 轮播图 -->
    <div>
      <!-- 横向滚动容器 -->
      <div class="horizontal-scroll">
        <el-row :gutter="15">
          <el-col
              v-for="(item, actorid) in actorlideshowlist"
              :key="item.actorid"
              :xs="3" :sm="2" :md="2" :lg="2"
          >
            <div class="actor-card">
              <img
                  :src="item.actorurl"
                  class="actor-img"
              >
              <!-- 文字区域优化 -->
              <div class="actor-text">
                <div class="name">{{ item.actorname }}</div>
                <div class="role">{{ item.figure }}</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <el-affix :offset-bottom="0" :z-index="999">
      <el-row style="background: white;height:50px;width: 100%;border-top-left-radius: 8px;border-top-right-radius: 8px;display: flex;align-items: center;">
        <el-col :span="24">
         <router-link to="/CinemaView" style="text-decoration: none;">
           <div style="display:flex;  justify-content: center;align-items: center;height: 30px">
               <div class="ticket">特惠购票</div>
           </div>
         </router-link>
        </el-col>
      </el-row>
    </el-affix>
  </div>

  <!-- 数据加载中或为空时显示 -->
  <div v-else>
    加载中...
  </div>
</template>

<style scoped>
.film-container {
  height: 120px;
  display: flex;
}
.film-information {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  padding: 10px 0;
}


.title {
  display: flex;
  align-items: center;
  margin: 3px
}

.egg {
  margin-left: 8px;
  color: #f8d3d3;
}

.content {
  line-height: 1.6;
  margin: 3px
}

.toggle {
  color: #00a2ff;
  cursor: pointer;
  margin-left: 4px;
}


/* 横向滚动容器：核心是 overflow-x + 禁止换行 */
.horizontal-scroll {
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}

/* 让 el-row 横向排列 */
.el-row {
  display: inline-flex;
  flex-wrap: nowrap;
}
/* 卡片样式 */
.actor-card {
  width: 150px;
  height: 180px;
  border-radius: 8px;
  overflow: hidden;
  margin-right: 0;
  background:#6A4325 ;
}

/* 图片样式 */
.actor-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin-right: 0px;
  border-radius: 8px;
  background:#6A4325 ;
}
.actor-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: auto; /* 根据内容自动调整高度 */
}

.actor-img {
  width: 85%;
  object-fit: cover;
  margin-bottom: 5px; /* 在图片和文字之间添加一些间距 */
}

.actor-text {
  padding: 0 5px;
  text-align: center;
}
.name {
  font-size: 13px;
  font-weight: 500;
  margin-right: 4px;
}

.role {
  font-size: 12px;
  color: #eeeeee; /* 角色名颜色稍浅 */
}
.ticket{
  background: red;
  color: white;
  border-radius: 8px;
  height: 30px;
  width: 90%;
  text-align: center;
}
</style>